<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title></title>
	</head>
	<link rel="stylesheet" href="css/weui.css" />
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/swiper.css" />
	<style>
		body {
			background-color: #dadada
		}
		
		#container {
			background-color: white;
			margin: 0 auto;
			max-width: 568px;
		}
	</style>

	<body id="demo">
		<div id="container">
			<xheader></xheader>
			<xsearch></xsearch>
			<xswiper></xswiper>
			<wlist></wlist>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/swiper.js"></script>
	<script>
		//头部组件
		Vue.component("xheader", {
				template: `
			<div class="weui-tabbar weui-wheader">
				<p class="ng-binding">推荐</p>
			</div>
			`
			})
			//搜索框组件
		Vue.component("xsearch", {
				template: `
				<div class="has_header">
					<div class="weui-search-bar" :class="{'weui-search-bar_focusing':isShowSearchBar}" id="searchBar">
			            <form class="weui-search-bar__form">
			                <div class="weui-search-bar__box">
			                    <i class="weui-icon-search"></i>
			                    <input type="search" v-model="searchName" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
			                    <a href="javascript:" @click="searchClear()" class="weui-icon-clear" id="searchClear"></a>
			                </div>
			                <label class="weui-search-bar__label" @click="showSearchBar()" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
			                    <i class="weui-icon-search"></i>
			                    <span>搜索</span>
			                </label>
			            </form>
		            <a href="javascript:" @click="isShowSearchBar=false" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        		</div>
        		</div>
			`,
				data: function() {
					return {
						isShowSearchBar: true,
						searchName: ""
					}
				},
				methods: {
					showSearchBar: function() {
						this.isShowSearchBar = true
					},
					searchClear: function() {
						this.searchName = ""
						document.getElementById("search-input").focus()
					}
				}
			})
			//轮播图组件
		Vue.component("xswiper", {
				template: `
				<div class="swiper-container">
					<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/cat.jpg" /></div>
		            <div class="swiper-slide"><img src="img/cat.jpg" /></div>
		            <div class="swiper-slide"><img src="img/cat.jpg" /></div>
		        </div>
        		<!-- Add Pagination -->
        		<div class="swiper-pagination"></div>
    			</div>
    			<style>
    				.swiper-slide img{
    					width:100%
    				}
    			</style>
			`,
				ready: function() {
					var swiper = new Swiper('.swiper-container', {
						pagination: '.swiper-pagination',
						paginationClickable: true
					});
				}
			})
			//新闻列表组件
		Vue.component("wlist", {
			template: `
			<div class="weui-panel weui-panel_access">
			    <div class="weui-panel__hd">图文组合列表</div>
			    <div class="weui-panel__bd">
			        <a v-for="news in newss" :href="news.url" class="weui-media-box weui-media-box_appmsg">
			            <div class="weui-media-box__hd">
			                <img class="weui-media-box__thumb" :src="news.picUrl" alt="">
			            </div>
			            <div class="weui-media-box__bd">
			                <h4 class="weui-media-box__title" v-text="news.title"></h4>
			                <p class="weui-media-box__desc" v-text="news.description"></p>
			            </div>
			        </a>
			    </div>
			    <div class="weui-panel__ft">
			        <a @click="getNews()" href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
			            <div class="weui-cell__bd">查看更多</div>
			            <span class="weui-cell__ft"></span>
			        </a>    
			    </div>
			</div>
			<div id="loadingToast" :style="{display:isShowLoading?'block':'none'}">
			    <div class="weui-mask_transparent"></div>
			    <div class="weui-toast">
			        <i class="weui-loading weui-icon_toast"></i>
			        <p class="weui-toast__content">数据加载中</p>
			    </div>
			</div>
			`,
			data: function() {
				return {
					newss: [],
					page: 1,
					isShowLoading: 0
				}
			},
			methods: {
				getNews() {
					this.isShowLoading += 1
					$.ajax({
						type: "GET",
						url: "json/meizi.json",
						data: {
							page: this.page
						},
						dataType: "json",
						success: function(data) {
							this.isShowLoading -= 1
							console.log(data)
							this.newss = this.newss.concat(data.showapi_res_body.newslist)
							console.log(this.newss)
						}.bind(this)
					})
				}
			},
			ready() {
				this.getNews()
			}
		})
		new Vue({
			el: "#demo",
			components: {}
		})
	</script>

</html>